開始一個 VuePress 專案吧！

凡事都從最簡單基礎的架構開始體驗吧，第一步就是先確認電腦上有沒有相應的開發環境，因為 VuePress 是使用 Webpack 來進行模組處理的，而且目前前端各項工具基本上都離不開 Node.js 的執行環境，所以要先進行安裝，如果已經安裝的也要確認版本喔。

VuePress 需要 Node.js >= 8.6

如果沒有安裝過 Node.js 的話，可能你目前不是專精於前端領域的開發者，先到 Node.js 官方網站下載 LTS 版本安裝即可，本文撰寫時 LTS 版本為 12.18.3

而 Node.js 中有內建一個叫做 npm 的套件管理工具，但是因為 VuePress 官方建議使用 Yarn 進行套件管理，所以還需要打開終端機視窗輸入下面的指令安裝 Yarn：

npm install -g yarn

該裝的環境安裝完，就可以進行下一步囉！

建立專案資料夾

不管你是喜歡下指令，還是喜歡用滑鼠點，都沒有關係，反正有辦法建立出一個專案資料夾就可以了，但是資料夾建立好之後，還是得靠指令了喔！

一樣打開終端機，先進入剛剛建立好的資料夾輸入指令 yarn init

專案初始化的設定可以不用管，先都用預設值一路 Enter 就好了

完成後資料夾內會多一個 package.json 的檔案，這個檔案會記錄專案內用到的套件與指令，接著我們就來安裝第一個套件 VuePress 吧！

yarn add -D vuepress

接著要在剛剛提過的 package.json 中新增一段腳本，透過腳本的運行環境才能順利執行 VuePress 的各項指令喔：

"scripts": {
    "dev": "vuepress dev ./",
    "build": "vuepress build ./"
},

貼上之後的 package.json 大致上會長這樣：

新增第一份文件啦

直接在專案根目錄中新增一個 README.md 檔案，檔案裡面可以使用 Markdown 的語法先隨便輸入一些內容

接著就可以到終端機視窗，輸入指令 yarn dev 來運行開發模式囉！

輸入完等子彈飛一會，沒有意外的話就會看到像這樣的畫面：

這時候我們就可以打開瀏覽器連線到 http://localhost:8080/ 來確認一下運行結果啦！

可以看到剛剛我們在 README.md 中輸入的內容已經呈現在網頁上了，而且如果有安裝
Vue.js devtools 的話，還可以看到組件與狀態喔。

新的頁面分類

當然網站也不可能只有一個頁面對吧？

我們就來試試看新增一個資料架 news，裡面新增兩個檔案：

• README.md
• test.md
  

儲存完之後我們再到網頁上面看看，網址列直接輸入 http://localhost:8080/news/ 就會顯示我們剛剛在 news 資料夾中 README.md 的內容

這個是因為 VuePress 預設將資料夾內的 README.md 視為根目錄文件喔。

所以如果想到看到 test.md 的內容，就只能輸入完整的路徑 http://localhost:8080/news/test.html 囉。

而這個 .html 則是因為 VuePress 將 .md 編譯為 HTML 文件的關係。

其實 VuePress 預設的主題內就有搜尋功能，也是可以趁機玩玩看啦！

更深入的專案結構

今天就透過簡單的展示來帶你啟動第一個 VuePress 專案，但是真正想要活用 VuePress 的話，這樣可就太單調啦。

明天就來針對專案結構做一個比較進階的解說吧。